<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
    <div style="width: 98%;height: 4%;display: flex;flex-direction: row;justify-content: flex-end;">
        <el-button style="margin:0 2px;" class="buttonInrRow" @click="pageFun('index')">首页</el-button>
        <el-button style="margin:0 2px;" class="buttonInrRow" @click="pageFun('up')">上一页</el-button>
        <el-button style="margin:0 2px;" class="buttonInrRow" @click="pageFun('down')">下一页</el-button>
        <el-button style="margin:0 2px;" class="buttonInrRow" @click="pageFun('last')">尾页</el-button>
    </div>
    <div style="width: 98%;height: 95%;background-color:rgb(6,31,51);display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
        <div style="width: 48%;height: 95%;">
            <el-table
                :data="devStatusDataFirst"
                :header-cell-style="{'text-align':'center','background-color':'#104662'}"
                :cell-style="{'text-align':'center','background-color': 'rgb(5,33,56)','border':'1px solid #104662'}"
                style="width: 95%; margin-left: 2%"
                @cell-dblclick="handleRowDblclick"
            >
            <el-table-column
                prop="number"
                label="序号"
                min-width="10%"
                show-overflow-tooltip
            />
            
            <el-table-column
                prop="time"
                
                min-width="18%"
                show-overflow-tooltip
            />
            <el-table-column
                prop="reportname"
                
                min-width="20%"
                show-overflow-tooltip
            />
            <el-table-column
                prop="description"
                
                min-width="20%"
                show-overflow-tooltip
            />
        <el-table-column 
        
            min-width="20%"
        >
        
        </el-table-column>
            </el-table>
        </div>
        <div style="width: 48%;height: 95%;">
            <el-table
                :data="devStatusDataSecond"
                :header-cell-style="{'text-align':'center','background-color':'#104662'}"
                :cell-style="{'text-align':'center','background-color': 'rgb(5,33,56)','border':'1px solid #104662'}"
                style="width: 95%; margin-left: 2%"

            >
            <el-table-column
                prop="number"
                label="序号"
                min-width="10%"
                show-overflow-tooltip
            />
            
            <el-table-column
                prop="time"
                
                min-width="18%"
                show-overflow-tooltip
            />
            <el-table-column
                prop="reportname"
                
                min-width="20%"
                show-overflow-tooltip
            />
            <el-table-column
                prop="description"
                
                min-width="20%"
                show-overflow-tooltip
            />
        <el-table-column 
        
            min-width="20%"
        >
        
        </el-table-column>
            </el-table>
        </div>
    </div>
  </div>
</template>

<script>
import {getreportList} from '../../api/diagnosisReport.js' 
export default {
    data(){
        return{
            // devStatusData: [
            //     {
            //         number: 1,
            //         id:'',
            //         time: '',
            //         reportname: '系统1',
            //         description: '故障内容1',
            //     },
            //     {
            //         number: 2,
            //         date: '2019-01-01',
            //         failureSystem: '系统1',
            //         failureContent: '故障内容1',
            //         failureLevel: '故障级别1'
            //     },
            //     {
            //         number: 3,
            //         date: '2019-01-01',
            //         failureSystem: '系统1',
            //         failureContent: '故障内容1',
            //         failureLevel: '故障级别1'
            //     },
            //     {
            //         number: 4,
            //         date: '2019-01-01',
            //         failureSystem: '系统1',
            //         failureContent: '故障内容1',
            //         failureLevel: '故障级别1'
            //     },
            //     {
            //         number: 5,
            //         date: '2019-01-01',
            //         failureSystem: '系统1',
            //         failureContent: '故障内容1',
            //         failureLevel: '故障级别1'
            //     },
            //     {
            //         number: 6,
            //         date: '2019-01-01',
            //         failureSystem: '系统1',
            //         failureContent: '故障内容1',
            //         failureLevel: '故障级别1'
            //     },
            // ],
            devStatusDataFirst:[],
            devStatusDataSecond:[],
            total:'',
            param:{
                valvehallId:1,
                pageCurrent:0,
                pageSize:20
            }
        }
    },
    methods: {
        generateDevData(){
            let n = this.param.pageSize;
            for(var i=0;i<n;i++){
                let temp ={
                number: '',
                id:'',
                time: '',
                reportname: '',
                description: '',
                };
                temp.number = i+1;
                if(i<n/2){
                    this.devStatusDataFirst.push(temp)
                }else{
                    this.devStatusDataSecond.push(temp)
                }
                
            }
        },
        handleRowDblclick(row, column, event) {
          console.log(row)
          this.$router.push({ 
            path:"/PageTest/disgnoseReport",　　　　 
            query:{id:row.id,time:row.time} 
        }) 
        },
        reportList(){
            getreportList(this.param).then(response => {
                console.log(response.data.records)
                let dataList = response.data.records;
                this.total = response.data.total;
                // console.log(dataList.lengh)
                for(let j=0;j<dataList.length;j++){
                    if(j<10){
                        this.devStatusDataFirst[j].id = dataList[j].id
                        this.devStatusDataFirst[j].time = dataList[j].time
                        this.devStatusDataFirst[j].reportname = dataList[j].reportname
                        this.devStatusDataFirst[j].description = dataList[j].description
                    }else{
                        this.devStatusDataSecond[j].id = dataList[j].id
                        this.devStatusDataSecond[j].time = dataList[j].time
                        this.devStatusDataSecond[j].reportname = dataList[j].reportname
                        this.devStatusDataSecond[j].description = dataList[j].description
                    }
                }
                // console.log(this.devStatusDataFirst)
            })
        },
        pageFun(val){
            switch (val){
                case 'index':
                    this.param.pageCurrent=0
                    break;
                case 'down':
                    this.param.pageCurrent = (this.param.pageCurrent+1 > pageIndex ? pageIndex:this.param.pageCurrent+1)
                    break;
                case 'up':
                    this.param.pageCurrent = (this.param.pageCurrent-1 < 0 ? 0:this.param.pageCurrent-1);
                    break;
                case 'last':
                    let pageIndex = parseInt(this.total/this.param.pageSize);
                    this.param.pageCurrent = pageIndex;
                    break;
                default:
                    break;
            }
            this.devStatusDataFirst = [];
            this.devStatusDataSecond = [];
            this.generateDevData();
            this.reportList()
            console.log(val)
        }
    },
    created() {
        this.generateDevData();
        this.reportList()
    },

}
</script>
<style lange="scss" scoped>
.buttonInrRow {
  color: #fff;
  font-size: 12px;
  padding: 2px 12px;
  font-size: 12px;
  border-radius: 3px;
  background-color: transparent !important;
  border-color: #93dcfe;
}
表格部分样式
::v-deep .el-table__header tr,
::v-deep .el-table__header th {
  padding: 0;
  height: 2%;
  font-size: 14px;
}
::v-deep .el-table--border, .el-table--group {
    border: none !important;
}
::v-deep .el-table__header {
  border-spacing: 0px;
}
::v-deep .el-table th.gutter{
  display: table-cell!important;
}
::v-deep.el-table–scrollable-y colgroup col[name=‘gutter’]{width:0px}
/* 去掉最下面的那一条线*/
::v-deep .el-table::before {
  height: 0px;
  background-color: transparent;
}
/* 设置表格行高度*/
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 30px;

}

/*表格内背景颜色*/
::v-deep.el-table th,
::v-deep.el-table tr,
::v-deep.el-table td {

  /*background-color: #052138;*/
  /*/ / 背景透明 */
  border: 0px;
  color: #93dcfe;
  /*/ / 修改字体颜色 */
  font-size: 14px;
  /* height: 30px; */
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}
</style>